.ss-platform-main-header {
  background: #fff;
  .switch-workspaces-icon {
    position: fixed;left: 0;top: 0;padding-left: 10px;width: 50px;height: 66px;z-index: 900;-moz-user-select: none;
    -webkit-user-select: none;cursor: pointer;box-sizing: border-box;transition: all .2s ease-out 0s;
    i {
      font-weight: 400 !important;text-decoration: none !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
      -webkit-text-stroke-width: .22px;position: relative;font-family: ssicon;padding-left: 1px;float: left;margin-top: 15px;
      color: #a2aee5;font-size: 20px;height: 36px;line-height: 36px;width: 36px;text-align: center;
      transition: all .2s ease-out 0s;-moz-transition: all .2s ease-out 0s;-webkit-transition: all .2s ease-out 0s;-o-transition: all .2s ease-out 0s;
    }
    @media not all, only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all {
      i {
        -webkit-text-stroke-width: .1px;
      }
    }
  }
  .title {
    height: 66px;border-bottom: 1px solid #d5d5d5;position: relative;
    .set {
      float: right;padding: 23px 20px 0 0;height: 66px;box-sizing: border-box;cursor: auto;position: relative;z-index: 1;
      em.pipe {float: left;margin: 0 0 0 15px;border-right: 1px solid #ececec;width: 1px;font-size: 0;height: 18px;}
      .avatar {
        float: left;margin-left: 15px;display: inline-block;height: 20px;line-height: 20px;
        img {width: 20px;height: 20px;float: left;cursor: pointer;border-radius: 100px;box-shadow: inset 0 0 2px rgb(0 0 0 / 30%);}
        span {display: inline-block;margin-left: 5px;font-size: 12px;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;}
      }
      .icon {
        float: left;margin-left: 15px;height: 20px;text-align: center;cursor: pointer;position: relative;
        i {
          text-align: center;font-weight: 400 !important;text-decoration: none !important;-webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;-webkit-text-stroke-width: .22px;position: relative;font-family: ssicon;
          padding-left: 1px;font-size: 18px;line-height: 18px;color: #9da1c4;
        }
        @media not all, only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all {
          i {
            -webkit-text-stroke-width: .1px;
          }
          em {
            display: none;position: absolute;top: -4px;left: 10px;min-width: 8px;text-align: center;padding: 0 2px;
            height: 13px;line-height: 12px;background-color: #008ed2;border-radius: 3px;color: #fff;font-family: Tahoma;font-size: 10px;
          }
        }
        &.unread {
          em {display: block}
          i {color: #008ed2;}
        }
      }
    }
    .nav {
      text-align: center;position: relative;height: 66px;
      h1, h2, h3 {
        position: absolute;left: 0;right: 0;white-space: nowrap;font-weight: 400;user-select: none;
        transition: all .2s ease-out 0s;-moz-transition: all .2s ease-out 0s;-webkit-transition: all .2s ease-out 0s;-o-transition: all .2s ease-out 0s;
      }
      h1 {top: 20px;opacity: 1;font-size: 0;
        span {
          font-size: 18px;color: #707070;display: inline-block;transition: all .2s ease-out 0s;-moz-transition: all .2s ease-out 0s;
          -webkit-transition: all .2s ease-out 0s;-o-transition: all .2s ease-out 0s;position: relative;
          cite {display: inline-block;overflow: hidden;vertical-align: middle;}
          i {
            font-weight: 400 !important;text-decoration: none !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-stroke-width: .22px;
            font-family: ssicon;position: absolute;margin-left: 5px;user-select: none;
            top: 2px;height: 26px;line-height: 26px;width: 26px;color: #9f9f9f;text-align: center;cursor: pointer;vertical-align: middle;font-size: 12px;padding: 0;
          }
          @media not all, only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all {
            i {-webkit-text-stroke-width: .1px;}
          }
        }
      }
      h2 {display: none;}
      &.second {
        h1 {
          top: 11px;
          span {color: #9f9f9f;font-size: 14px;}
          i {display: none}
        }
        h2 {
          top: 30px;opacity: 1;display: block;
          span {color: #707070;font-size: 18px;}
        }
        &:hover {
          h1 {
            top: 20px;
            span {
              font-size: 18px;color: #3b65a7
            }
          }
          h2 {
            top: 47px;font-size: 18px;color: #707070;opacity: 0
          }
        }
      }
    }
  }
  .menu {
    height: 34px;background-color: #f9f9f9;border-bottom: 1px solid #ececec;box-sizing: border-box;text-align: center;
    .list {
      display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;
      justify-content: center;margin: 0 auto;max-width: 940px;height: 34px;overflow: hidden;
      ul {
        list-style: none;zoom: 1;
        li {
          float: left;margin: 0 10px;padding: 0 5px;height: 34px;line-height: 36px;cursor: pointer;box-sizing: border-box;overflow: hidden;
          &.current {
            border-bottom: 2px solid #008ed2;color: #008ed2;
            span {color: #008ed2;}
          }
        }
      }
    }
  }
  &::before, &::after {box-sizing: border-box !important;}
}
